package com.hippo.core.ui.compose.login.forget

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.hippo.core.R
import com.hippo.core.core.ext.paddingBody
import com.hippo.core.ui.components.CommonBody
import com.hippo.core.ui.components.HorizontalSpacer
import com.hippo.core.ui.components.ThemeButton
import com.hippo.core.ui.components.VerticalSpacer
import com.hippo.core.ui.theme.HippoTheme
import com.hippo.core.utils.UiHandler

@Composable
fun VerifyCodeScreen(
    email:String,
    onBack:()->Unit,
    onNext:(String,String)->Unit,
    vm: ForgetVM = viewModel(),
) {

    var code1 by remember { mutableStateOf("") }
    var code2 by remember { mutableStateOf("") }
    var code3 by remember { mutableStateOf("") }
    var code4 by remember { mutableStateOf("") }


    CommonBody(
        title = stringResource(R.string.verify_5),
        onBack = onBack
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .paddingBody()
        ) {

            VerticalSpacer(30.dp)

            Text(
                text = stringResource(R.string.verify_6),
                style = MaterialTheme.typography.labelLarge
            )

            VerticalSpacer(24.dp)

            val msg = buildAnnotatedString {
                append(stringResource(R.string.verify_7))
                append(" ")
                withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
                    append(email)
                }
            }
            Text(
                text = msg,
                fontSize = 14.sp,
                style = MaterialTheme.typography.bodySmall
            )

            VerticalSpacer(10.dp)

            Text(
                text = stringResource(R.string.verify_15),
                fontSize = 14.sp,
                style = MaterialTheme.typography.bodySmall
            )

            VerticalSpacer(30.dp)

            Row {

                HorizontalSpacer(8.dp, modifier = Modifier.weight(1F))

                OutlinedTextField(
                    value = code1,
                    onValueChange = {
                        if(code1.isEmpty()){
                            code1 = it
                        }
                    },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        imeAction = ImeAction.Next,
                        keyboardType = KeyboardType.Number
                    ),
                    singleLine = true,
                    textStyle = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 26.sp,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier.size(60.dp),
                )

                HorizontalSpacer(8.dp, modifier = Modifier.weight(1F))

               OutlinedTextField(
                    value = code2,
                   onValueChange = {
                       if(code2.isEmpty()){
                           code2 = it
                       }
                   },
                   keyboardOptions = KeyboardOptions.Default.copy(
                       imeAction = ImeAction.Next,
                       keyboardType = KeyboardType.Number
                   ),
                    singleLine = true,
                    textStyle = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 26.sp,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier.size(60.dp),
                )

                HorizontalSpacer(8.dp, modifier = Modifier.weight(1F))

               OutlinedTextField(
                    value = code3,

                   onValueChange = {
                       if(code3.isEmpty()){
                           code3 = it
                       }
                   },
                   keyboardOptions = KeyboardOptions.Default.copy(
                       imeAction = ImeAction.Next,
                       keyboardType = KeyboardType.Number
                   ),
                    singleLine = true,
                    textStyle = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 26.sp,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier.size(60.dp),
                )

                HorizontalSpacer(8.dp, modifier = Modifier.weight(1F))

                OutlinedTextField(
                    value = code4,
                    onValueChange = {
                        if(code4.isEmpty()){
                            code4 = it
                        }
                    },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        imeAction = ImeAction.Done,
                        keyboardType = KeyboardType.Number
                    ),
                    singleLine = true,
                    textStyle = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 26.sp,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier.size(60.dp),
                )

                HorizontalSpacer(8.dp, modifier = Modifier.weight(1F))

            }



            VerticalSpacer(80.dp)

            ThemeButton(
                modifier = Modifier.fillMaxWidth(),
                text = stringResource(R.string.next),
                onClick = {
                    val code = "$code1$code2$code3$code4"
                    if(code.isNullOrBlank()){
                        UiHandler.showToast(R.string.verify_6)
                    }else{
                        if(code.isBlank() || code.length != 4){
                            UiHandler.showToast(R.string.verify_6)
                        }else{
                            vm.chkEmailCode(code){
                                onNext(email,code)
                            }
                        }
                    }
                }
            )

        }
    }

}


@Preview(showBackground = true)
@Composable
private fun VerifyCodeScreenPreview() {

    HippoTheme {
        VerifyCodeScreen("aa@qq.com",{},{_,_->})
    }

}